<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-card
          class="project-list"
          :loading="platformLoading"
          style="margin-bottom: 24px"
          :bordered="false"
          title="资产统计"
          :body-style="{ padding: 0 }"
        >
          <div class="extra-wrapper" slot="extra">
            <!-- <a-select
              style="width: 200px"
              v-model="userId"
              show-search
              placeholder="qinshuru"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :options="userList"
              @search="handleSearch"
            >
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            </a-select> -->
            <!-- &nbsp; &nbsp; -->
            <!-- <a-range-picker :style="{ width: '256px' }" v-model="time" @change="handleChangeTime" /> -->
          </div>
          <!-- <a slot="extra" href="#">more</a> -->
        </a-card>
      </a-col>
      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <div class="awm-card-wrap">
          <div class="awm-card">
            <chart-card
              title="余额"
              :total="info.balance | NumberFormat"
              :hasContent="false"
              :loading="platformLoading"
            >
              <a-tooltip title="短信余额(元)" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <template slot="footer">
                <span flag="down" style="margin-right: 16px">
                  <!-- <span slot="term">充值数量 </span>
                  <span>{{ info.recharge | NumberFormat }}</span> -->
                </span>
              </template>
            </chart-card>
          </div>

          <div class="awm-card">
            <chart-card
              title="发送短信数量"
              :total="info.send | NumberFormat"
              :hasContent="false"
              :loading="platformLoading"
            >
              <a-tooltip title="发送短信数量(条)" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <template slot="footer">
                <span flag="down" style="margin-right: 16px">
                  <span slot="term">发送短信缩减数量 </span>
                  <span>{{ info.curtail | NumberFormat }}</span>
                </span>
              </template>
            </chart-card>
          </div>

          <div class="awm-card">
            <chart-card
              title="发送短信金额"
              :total="info.sendMoney | NumberFormat"
              :hasContent="false"
              :loading="platformLoading"
            >
              <a-tooltip title="发送短信金额(元)" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <template slot="footer">
                <span flag="down" style="margin-right: 16px">
                  <span slot="term">发送短信成本 </span>
                  <span>{{ info.costMoney | NumberFormat }}</span>
                </span>
              </template>
            </chart-card>
          </div>
          <div class="awm-card">
            <chart-card
              title="充值金额"
              :total="info.rechargeMoney | NumberFormat"
              :hasContent="false"
              :loading="platformLoading"
            >
              <a-tooltip title="充值金额(元)" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <template slot="footer">
                <span flag="down" style="margin-right: 16px">
                  <span slot="term">试用金额 </span>
                  <span>{{ info.testMoney | NumberFormat }}</span>
                </span>
              </template>
            </chart-card>
          </div>
        </div>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card title="7天充值金额">
          <div style="height: 300px">
            <AWM-line :chartData="rechargeArr" :height="400"></AWM-line>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card title="7天发送短信金额">
          <div style="height: 300px">
            <AWM-line :chartData="senArr" :height="400"></AWM-line>
          </div>

          <!-- :lineList='[{name: 1}]' -->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import { ChartCard, MiniArea, MiniBar, MiniProgress, Bar, Trend, MiniSmoothArea } from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { getFinanceStatistics } from '@/api/system'
import AWMLine from '@/components/AWMechart/line'
import TaskList from './modules/TaskList'
import cloneDeep from 'lodash.clonedeep'
import { mapGetters } from 'vuex'
import { getUserList } from '@/api/login'

const DataSet = require('@antv/data-set')

const pieScale = [
  {
    dataKey: 'number',
    min: 0,
    // formatter: '.0%',
  },
]

export default {
  name: 'platform-Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    MiniSmoothArea,
    AWMLine,
    TaskList,
  },
  data() {
    return {
      fetching: false,
      userList: [],
      userId: null,
      timeType: 2,
      startTimeValue: null,
      endTimeValue: null,

      openStart: false,
      time: null,
      key: '1',
      platformLoading: true,
      loading: true,
      // 搜索用户数
      //
      task: {
        visible: false,
        confirmLoading: false,
        requireData: {},
        type: '',
      },
      pieScale,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      rechargeArr: [],
      senArr: [],
      aOption: {},
      time: null,
      info: {}, // 头部统计
    }
  },
  filters: {
    lastList(list) {
      if (list.length && list.length != 0) {
        return list[list.length - 1].y
      } else {
        return ''
      }
    },
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo' }),
    searchTableColumns(type) {
      return [
        {
          dataIndex: 'id',
          title: 'ID',
        },
        {
          dataIndex: 'name',
          title: '工作室名称',
          scopedSlots: { customRender: 'name' },
        },
        {
          dataIndex: 'total',
          title: '总任务数',
          customRender: (text) => (text ? text : `--`),
        },

        {
          dataIndex: 'finish',
          title: '完成任务数',
          customRender: (text) => (text ? text : `--`),
        },
        {
          dataIndex: 'overdue',
          title: '逾期任务数',
          scopedSlots: { customRender: 'overdue' },
          // customRender: (text) => text ? text : `--`,
        },
        {
          dataIndex: 'totalTime',
          title: '总任务时长(秒)',
        },
        {
          dataIndex: 'finishTime',
          title: '已完成时长(秒)',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   width: '150px',
        //   scopedSlots: { customRender: 'action' },
        // },
        // {
        //   dataIndex: 'range',
        //   title: this.$t('dashboard.analysis.table.weekly-range'),
        //   align: 'right',
        //   sorter: (a, b) => a.range - b.range,
        //   scopedSlots: { customRender: 'range' },
        // },
      ]
    },
    pSearchTableColumns() {
      let arr = cloneDeep(this.searchTableColumns)
      arr[1].title = '项目名称'
      return arr
    },
  },
  created() {},
  mounted() {
    this.getAnalysis()
    this.handleSearch('', true)
  },
  methods: {
    handleSearch(val, a_init) {
      let data = { name: val, pageNum: 1, pageSize: a_init ? 10 : 100 }
      this.fetching = true
      getUserList(data)
        .then((res) => {
          this.userList = res.data.data.map((v) => {
            return {
              label: v.name,
              value: v.id,
            }
          })
        })
        .finally(() => (this.fetching = false))
    },
    handleGetAnalysis(e) {
      let str = e.target.value
      this.timeType = str
      this.startTimeValue = null
      this.endTimeValue = null
    },
    handleChangeTime(val) {
      console.log(val)
      if (val[0]) {
        this.startTime = val[0].format('YYYY-MM-DD') + ' 00:00:00'
        this.endTime = val[1].format('YYYY-MM-DD') + ' 23:59:59'
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.getAnalysis()
    },
    // 头部统计
    renderTotal(a_data) {
      let arr = [
        'finishNumByAssets',
        'finishNumByShot',
        'finishTimeLength',
        'hisDelayNumByAssets',
        'hisDelayNumByShot',
        'hisDelayTimeLength',
        'levelNumByAssets',
        'levelNumByShot',
        'nowDelayNumByAssets',
        'nowDelayNumByShot',
        'nowDelayTimeLength',
        'totalNumByAssets',
        'totalNumByShot',
        'totalTimeLength',
        'retakeTimeLength',
        'retakeNumByAssets',
        'retakeNumByShot',
      ]
      let data = {}

      a_data.forEach((v) => {
        //  工作室等级
        if (v.taskInfo) {
          let taskInfo = JSON.parse(v.taskInfo)
          arr.forEach((v) => {
            let num = taskInfo[v] || 0
            data[v] = data[v] || 0
            data[v] += num
          })
        }
      })
      arr.forEach((v) => {
        this[v] = data[v]
      })
    },
    getAnalysis() {
      let { startTime, endTime } = this
      let data = { startTime, endTime }
      this.platformLoading = true
      getFinanceStatistics(data)
        .then((res) => {
          let data = res.data
          data.dayNumberStatistics.reverse().map((v) => {
            this.rechargeArr.push({
              name: v.day.substring(0, 10),
              count: v.rechargeNumber,
            })
            this.senArr.push({
              name: v.day.substring(0, 10),
              count: v.moneyNumber,
            })
          })

          this.info = data
        })
        .finally(() => {
          this.platformLoading = false
        })
    },
    handleCheckList(a_record, a_str) {
      this.task.visible = true
      this.task.requireData = a_record
      this.key = a_str
    },
    handleCancel() {
      this.task.visible = false
      this.task.requireData = {}
    },
    handleOk() {},
    handleJump(a_str, a_id) {
      this.$router.push(`/dashboard/taskAnalysis/details/${a_str}/${a_id}`)
    },
  },
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  display: flex;
  line-height: 32px !important;
  // padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.awm-card-wrap {
  display: flex;
  .awm-card {
    width: calc(25% - 18px);
    margin-right: 24px;
    margin-bottom: 24px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.ant-table-wrapper-card {
  height: 100%;
}
.ant-table-wrapper {
  padding: 10px;
  // min-height: 428px;
}
</style>
